@function rem($s){
    @return ($s/64)*1rem
}
$testbord:1px solid #e3e3e3;
$sub-color:#727272;

body{
    // background: red;
}
.banner img{width: 100%;}

.imgbox img{width: 100%;}
.section{padding:0 2.5%;}
.mt-8{margin-top: 8px;}
.mb-8{margin-bottom: 8px;}
.banner-carou {
width: 100%;
overflow: hidden;

}
.banner-carou .swiper-slide {
text-align: center;
/* background: #BB7171; */
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height:rem(290);
overflow: hidden;
color: white;
}


.swiper-slide img{width: 100%;}
.nav-carou{}
.nav-carou .swiper-slide {
text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height:42px;

}
.nav-carou{
    // padding:2.8% 0;
    .swiper-slide{
        position: relative;
    }
     .curico {
        position: absolute;
        bottom: 0;
        width: 82%;
        height: 16px;
        left:50%;
        transform:translate(-50%,0);
        overflow: hidden;

    }
    .swiper-slide.cur .curico{
        display: block;
    }
}

.a-block{display: block;position: relative}


.swiper-slide{
    font-size: rem(30);
}
.block{
    display: block;
}
div,ul,li,a{box-sizing: border-box;}

.article-part{
    padding:1.2% 2.2%;
}

.article-part .link{
    border-bottom:#E6E6E6;
    padding:1.2% 0;
    
}
.article-left{
    float: left;
    width:25%;
    // border: $testbord;
}
.article-right {
    float: right;
    width: 74.5%;
    background: #F7F7F7;
    padding: 1.5px 8px;
    border-radius: 9px;
}

.article-right .title{
    font-size: rem(30);
}
.article-right .details{
    font-size: rem(27);
    color:$sub-color;
}
.article-left .imgbox{
    width: rem(80);
    height: rem(80);
    // border:1px solid #666363;
    margin:0 auto;
    margin-top: rem(6);
    border-radius: 50%;
    overflow: hidden;
}

.brand-part{
    padding: 0 3.3%;
    margin-top: 8px;
}
.imgbox img{width: 100%;}

.brand-list{
    float: left;
    width: 33%;
    // border:1px solid red;
    border-radius: 8px;
    height: rem(240);
    overflow: hidden;
    // padding:rem(10)
    margin-bottom:rem(16);

}
.brand-list img{width: 100%;height: 100%;}

.col33 img{
    width:100%;
}
.col25 img{
    width:100%;
}

.bottom-wrap{
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 640px;
    z-index: 1000;

}

.bottom-nav{
    border-top:$testbord;
    background: white;
    font-size:13px;
}
.bottom-nav .imgbox{
    width:35%;
    // height: 15px;
    margin: 0 auto;
    // border:$testbord;
    margin-bottom:4px;
    margin-top:4px;
}

.sub-title{
    // border-top:$testbord;
    // border-bottom:$testbord;    
    padding:1.9% 3.2%;
    font-size:rem(29);
    position: relative;
    color:#999;
    font-weight: bold;
    .more-right{
        position: absolute;
        right:3%;
        top: 50%;
        width:18px;
        height: 18px;
        // border: $testbord;
        overflow: hidden;
        transform: translate(0,-50%);
        img{
            // width: 100%;
            vertical-align: top;
        }
    }
}

.card-swiper{
    // border:$testbord;
    background:#FDFDFD;
    padding: 8%;
    .swiper-slide{
        height:rem(330);
        border:$testbord;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px #CCCCCC;
        position: relative;
        .imgbox{
            width: 100%;
            height: rem(255);
            // border:$testbord;
            overflow: hidden;
            border-bottom: 1px solid #e3e3e3;
        }
    }
}
.card-swiper .card-txt{
    font-size:13px;
    padding:0 3px;
    position: absolute;
    bottom:3.2%;
    width: 100%;
}
.card-txt .anthor{
    font-size: 10px;
    margin-left:5px;
    color:#E88272;

}

.photo-show{
    padding:0 1.8%;
}
.show-left{
    float: left;
    width:72%;
    border:$testbord;
    height:rem(490);
    overflow: hidden;
}
.show-right{
    float: right;
    width: 25%;
    border:$testbord;
    height:rem(490);
    background: #EFEFEF;
}
.column-box{
    height: 100%;
}
.column-list{
    height: 33.33%;
    width: 100%;
    // border:$testbord;
    position: relative;
    img{
        width: 100%;

    }
}

.show-txt{
    font-size:9px;
    position: absolute;
    left: 50%;
    bottom: 0;
    display: inline-block;
    transform:translate(-50%,0);

}
.column-list .imgbox{
    position: absolute;
    width: 80%;
    height: 70%;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    border:$testbord;
    img{
        width: 100%;
        height: 100%;
    }
}

.active-section {
    background: #EBEBEB;
    padding: 2% 3.3% 4% 3.3%;
}
.active-item{
    background: white;
    border-radius: 8px;
    // height: rem(450);
    overflow: hidden;
    .imgbox{
        height:rem(300);
        border-bottom: $testbord;
        overflow: hidden;
    }
}
.active-desc{
    width: 95%;
    margin:2% auto 2.8% auto;
    .info{
        padding:4px 0;
        border-bottom: 1px dashed #CCCCCC;
    }
}
.active-desc .more{
   margin-top: 4px;
}
.active-desc .title{
    font-size: rem(24);
}


// loading animate
   
.ng-scope{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@keyframes lds-wedges {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes lds-wedges {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .lds-wedges {
    position: relative;
  }
  .lds-wedges > div > div {
    -webkit-transform-origin: 100px 100px;
    transform-origin: 100px 100px;
    -webkit-animation: lds-wedges 3s linear infinite;
    animation: lds-wedges 3s linear infinite;
    opacity: 0.8;
  }
  .lds-wedges > div > div > div {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 70px;
    height: 70px;
    border-radius: 70px 0 0 0;
    -webkit-transform-origin: 100px 100px;
    transform-origin: 100px 100px;
  }
  .lds-wedges > div div:nth-child(1) > div {
    background: #fc4309;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .lds-wedges > div div:nth-child(1) {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
  }
  .lds-wedges > div div:nth-child(2) > div {
    background: #ff765c;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .lds-wedges > div div:nth-child(2) {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
  }
  .lds-wedges > div div:nth-child(3) > div {
    background: #ffb646;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .lds-wedges > div div:nth-child(3) {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
  }
  .lds-wedges > div div:nth-child(4) > div {
    background: #ff9900;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .lds-wedges > div div:nth-child(4) {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  .lds-wedges {
    width: 86px !important;
    height: 86px !important;
    -webkit-transform: translate(-43px, -43px) scale(0.43) translate(43px, 43px);
    transform: translate(-43px, -43px) scale(0.43) translate(43px, 43px);
  }

